<template>
  <el-aside :width="width">
    <h4>千锋管理系统</h4>
    <el-menu
      v-if="userInfo.adminname === 'admin'"
      :collapse="collapse"
      :default-openeds="['1', '3']"
      router
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
    >
      <el-menu-item index="/home">首页</el-menu-item>
      <el-sub-menu index="1">
        <template #title>
          <el-icon><Location /></el-icon><span>账户管理</span>
        </template>
        <el-menu-item index="/home/manage/manageList">管理员列表</el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="2">
        <template #title>
          <el-icon><icon-menu /></el-icon><span>轮播图管理</span>
        </template>
        <el-menu-item index="/home/swipemanage/swipelist"
          >轮播图列表</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="3">
        <template #title>
          <el-icon><ShoppingBag /></el-icon><template></template
          ><span>产品管理</span>
        </template>
        <el-menu-item index="/home/productManage/productList"
          >产品列表</el-menu-item
        >
        <el-menu-item index="/home/productManage/secondKill"
          >秒杀列表</el-menu-item
        >
        <el-menu-item index="/home/productManage/tipList"
          >推荐列表</el-menu-item
        >
        <el-menu-item index="/home/productManage/filterList"
          >筛选列表</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
    <el-menu
      v-else
      :collapse="collapse"
      :default-openeds="['1', '3']"
      router
      active-text-color="#ffd04b"
      background-color="#545c64"
      text-color="#fff"
    >
      <el-menu-item index="/home">首页</el-menu-item>
      <el-sub-menu
        v-for="item in userInfo.checkedkeys"
        :index="`/home/${item.path}`"
      >
        <template #title>
          <el-icon><Location /></el-icon><span>{{ item.label }}</span>
        </template>
        <el-menu-item
          v-for="subitem in item.children"
          :index="`/home/${item.path}/${subitem.path}`"
          >{{ subitem.label }}</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<script>
import {
  Menu as IconMenu,
  Message,
  Location,
  ShoppingBag,
} from "@element-plus/icons-vue";
import { routes } from "../router/index.js";

export default {
  props: ["width", "collapse"],
  components: {
    Message,
    Location,
    IconMenu,
    ShoppingBag,
  },
  computed: {
    userInfo() {
      // 获取登录后的用户消息
      return this.$store.state.userInfo;
    },
    routesData(){
      return JSON.parse(JSON.stringify(routes[2].children))
    },
    list(){
      return this.userInfo.adminname === 'admin'?this.routesData:this.userInfo.checkedkeys;
    }
  },

};
</script>
<style scoped>
html,
body,
#app,
.el-container,
.el-aside {
  height: 100vh;
}
.el-aside {
  background-color: #545c64;
}
.el-menu {
  border: none;
}
h4 {
  padding-left: 20px;
  color: white;
}
</style>
